<template>
  <div>
      <p>
          1.1 剧本名称：
          <span class="readonly">{{ props.work.wname }}</span>
      </p>
      <p>
          1.2 剧本作者：
          <span class="readonly">{{ props.writer.uname }}</span>
      </p>
      <p>
          1.3 剧本类型：
          <span class="readonly">{{ props.work.themename }}</span>（例如：短视频剧本、微电影剧本、广告剧本等）
      </p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
// 定义 props
const props = defineProps({
work: {
  type: Object,
  required: true
},
writer: {
  type: Object,
  required: true
},
user: {
  type: Object,
  required: true
}
});
</script>

<style scoped>
/* 只读区域样式 */
.readonly {
  display: inline-block;
  min-width: 120px;
  border-bottom: 1px solid black; /* 添加下划线效果 */
  line-height: 25px; /* 确保内容垂直居中 */
  text-align: center; /* 水平居中 */
  cursor: default; /* 将光标设置为默认 */
}
</style>
